<template>
  <div class="app-container home">

    <div style="height: 100%">

      <div class="search-shape">

        <div style="display: flex">

          <div class="topic_name_label">
            {{topicName}}
          </div>

          <el-menu :default-active="activeIndex" style="width: 100%" mode="horizontal" @select="handleSelectTab">
            <el-menu-item index="1" :style="{  fontSize:'16px'}">信息列表</el-menu-item>
            <el-menu-item index="2" :style="{  fontSize:'16px'}">图表分析</el-menu-item>
          </el-menu>
        </div>


        <el-collapse v-if="showIndex==1">
          <el-collapse-item title="筛选条件" name="1">


            <el-row>

              <el-col :span="12">

                <div style="font-size: 14px; margin-top: 10px">
                  监测时间:
                  <el-radio-group size="small" v-model="timeType" @change="onChangeGroup">
                    <el-radio-button v-for="(option, index) in options" :key="index"
                                     :label="option.value">{{option.label}}
                    </el-radio-button>
                  </el-radio-group>

                  <el-date-picker
                    @change="onPickDate"
                    value-format="yyyy-MM-dd"
                    style="margin-left: 10px"
                    v-if="showSelectData"
                    v-model="value1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>

                </div>

              </el-col>
              <el-col :span="12">

                <div style="font-size: 14px; margin-top: 10px">
                  信息排序:
                  <el-radio-group size="small" v-model="selectSort" @change="onChangeGroupSort">
                    <el-radio-button v-for="(option, index) in sortOptions" :key="index"
                                     :label="option.dictValue">
                      {{option.dictLabel}}
                    </el-radio-button>
                  </el-radio-group>
                </div>

              </el-col>
              <el-col :span="12">
                <div style="font-size: 14px; margin-top: 10px">
                  信息属性:
                  <el-radio-group size="small" v-model="selectEmotion" @change="onChangeGroupEmotion">
                    <el-radio-button v-for="(option, index) in emotionOptions" :key="index"
                                     :label="option.dictValue">
                      {{option.dictLabel}}
                    </el-radio-button>
                  </el-radio-group>
                </div>
              </el-col>

            </el-row>


          </el-collapse-item>
        </el-collapse>


      </div>


      <el-row v-if="showIndex==1" style="background-color: white;padding: 10px;margin-top: 10px">
        <el-col :span="3" style="margin: 6px 0">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">
            全部
          </el-checkbox>
        </el-col>
        <el-checkbox-group v-model="checkList" @change="handleCheckedMediaTypeChange">
          <el-col :span="3" style="margin: 6px 0" v-for="(item, index) in checks" :key="index">
            <el-checkbox :label="item.dictValue" :value="item.dictValue">{{item.dictLabel}}
              <span style="color: #0C71E0">
                       ({{getCount(item.dictValue)}})
                    </span>
            </el-checkbox>
          </el-col>
        </el-checkbox-group>
      </el-row>


      <div v-if="showIndex==2">


        <el-row :gutter="10">
          <el-col :span="8">


            <div class="card-item" style="background: #479FF9;width: 100%;">
              <div class="card-header clearfix">
                <div class="header-item inline-block v-a-m mr20">
                  <svg-icon icon-class="chart"/>
                  <span class="font-size-16 inline-block header-title">发文总量</span></div>


              </div>


              <div class="total-nums">{{relatedInformation}}</div>

              <div class="cate-con">
                <div class="inline-block ph10 ng-star-inserted">
                  <div class="inline-block v-a-m color-fff text-center" style="font-weight: 500;">
                    <div class="font-size-16">正面</div>
                    <div class="font-size-16">{{positive}}</div>
                  </div>
                </div>
                <div class="inline-block ph10 ng-star-inserted">
                  <div class="inline-block v-a-m color-fff text-center" style="font-weight: 500;">
                    <div class="font-size-16">中性</div>
                    <div class="font-size-16">{{neutral}}</div>
                  </div>
                </div>
                <div class="inline-block ph10 ng-star-inserted">
                  <div class="inline-block v-a-m color-fff text-center" style="font-weight: 500;">
                    <div class="font-size-16">负面</div>
                    <div class="font-size-16">{{negative}}</div>
                  </div>
                </div>
              </div>

            </div>


          </el-col>
          <el-col :span="8">

            <div class="card-item" style="background: #1CB6EF;width: 100%;">
              <div class="card-header clearfix">
                <div class="header-item inline-block v-a-m mr20">
                  <svg-icon icon-class="互动"/>
                  <span class="font-size-16 inline-block header-title">互动声量</span></div>


              </div>


              <div class="total-nums">{{totalShares+totalComments+totalLikes+totalReads}}</div>

              <div class="cate-con">
                <div class="inline-block ph10 ng-star-inserted">
                  <div class="inline-block v-a-m color-fff text-center" style="font-weight: 500;">
                    <div class="font-size-16">转发</div>
                    <div class="font-size-16">{{totalShares}}</div>
                  </div>
                </div>
                <div class="inline-block ph10 ng-star-inserted">
                  <div class="inline-block v-a-m color-fff text-center" style="font-weight: 500;">
                    <div class="font-size-16">评论</div>
                    <div class="font-size-16">{{totalComments}}</div>
                  </div>
                </div>
                <div class="inline-block ph10 ng-star-inserted">
                  <div class="inline-block v-a-m color-fff text-center" style="font-weight: 500;">
                    <div class="font-size-16">点赞</div>
                    <div class="font-size-16">{{totalLikes}}</div>
                  </div>
                </div>
                <div class="inline-block ph10 ng-star-inserted">
                  <div class="inline-block v-a-m color-fff text-center" style="font-weight: 500;">
                    <div class="font-size-16">阅读</div>
                    <div class="font-size-16">{{totalReads}}</div>
                  </div>
                </div>
              </div>

            </div>

          </el-col>
          <el-col :span="8">

            <div class="card-item" style="background: #F09971;width: 100%;">
              <div class="card-header clearfix">
                <div class="header-item inline-block v-a-m mr20">
                  <svg-icon icon-class="peoples"/>
                  <span class="font-size-16 inline-block header-title">影响力值</span></div>

              </div>


              <div class="total-nums">{{totalFans}}</div>

              <div class="cate-con">
                <div class="inline-block ph10 ng-star-inserted">
                  <div class="inline-block v-a-m color-fff text-center" style="font-weight: 500;">
                    <div class="font-size-16">发帖人数</div>
                    <div class="font-size-16">{{totalAuthors}}</div>
                  </div>
                </div>
                <div class="inline-block ph10 ng-star-inserted">
                  <div class="inline-block v-a-m color-fff text-center" style="font-weight: 500;">
                    <div class="font-size-16">粉丝数</div>
                    <div class="font-size-16">{{totalFans}}</div>
                  </div>
                </div>

              </div>

            </div>
          </el-col>
        </el-row>


        <div class="box">
          <ModuleHeader :title="'信息载体趋势图'"/>
          <div class="box_div">
            <LineChart :height="height"
                       :optionSeries="optionSeriesMediaType"
                       :optionXAxisData="optionXAxisDataMediaType"
                       :optionLegend="optionLegendMediaType"
            />
          </div>
        </div>

        <div class="box">
          <ModuleHeader :title="'正负面信息趋势图'"/>
          <div class="box_div">
            <LineChart
              :height="height"
              :optionLegend="optionLegendSentiments"
              :optionSeries="optionSeriesSentiments"
              :optionXAxisData="optionXAxisDataSentiments"
              :color="sentimentsColor"
              />
          </div>
        </div>

        <div class="box">
          <ModuleHeader :title="optionTitleTextHotWords"/>
          <div class="box_div">
            <word-cloud :hots="hotWords"
                        :height="height"
                         />
          </div>
        </div>

        <div class="box">
          <ModuleHeader :title="optionTitleTextMediaNameEmotion"/>
          <div class="box_div">
            <bar-chart-data-set
              :height="height"
              :opinionDatasetDimensions="opinionDatasetDimensionsMediaNameEmotion"
              :opinionDatasetSource="opinionDatasetSourceMediaNameEmotion"
            />
          </div>
        </div>

        <div class="box">
          <ModuleHeader :title="optionTitleTextAuthorEmotion"/>
          <div class="box_div">
            <bar-chart-data-set
              :height="height"
              :opinionDatasetDimensions="opinionDatasetDimensionsAuthorEmotion"
              :opinionDatasetSource="opinionDatasetSourceAuthorEmotion"
            />
          </div>
        </div>



      </div>

      <div v-if="showIndex==1" class="event-shape">


        <div class="handle-nav">
          <div style="width: 600px; display: flex; justify-content: space-between; align-items: center">
            <el-dropdown trigger="click">
              <div style="display: flex; align-items: center; cursor: pointer">
                <img src="../../../assets/images/research.svg" style="width: 20px; height: 20px"/>
                <div style="margin-left: 7.5px">研判为</div>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="setSensitiveInformationByPelople('正面')">
                  正面
                </el-dropdown-item>
                <el-dropdown-item @click.native="setSensitiveInformationByPelople('中性')">
                  中性
                </el-dropdown-item>
                <el-dropdown-item @click.native="setSensitiveInformationByPelople('负面')">
                  负面
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown trigger="click">
              <div style="display: flex; align-items: center">
                <img src="../../../assets/images/warning.svg" style="width: 20px; height: 20px"/>
                <div style="margin-left: 7.5px">加入预警</div>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="setForecastMultiple('red')">
                  红色预警
                </el-dropdown-item>
                <el-dropdown-item @click.native="setForecastMultiple('orange')">
                  橙色预警
                </el-dropdown-item>
                <el-dropdown-item @click.native="setForecastMultiple('yellow')">
                  黄色预警
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

            <div style="display: flex; align-items: center">
              <img src="../../../assets/images/educe.svg" style="width: 20px; height: 20px"/>
              <el-button type="text" style="margin-left: 7.5px" :loading="exportLoading" @click="handleExport">导出文章
              </el-button>
            </div>
            <div style="display: flex; align-items: center">
              <img src="../../../assets/images/store.svg" style="width: 20px; height: 20px"/>
              <el-button type="text" style="margin-left: 7.5px" @click="addToFavoritesMultiple">加入收藏
              </el-button>
            </div>
          </div>
          <div style="width: 600px; display: flex; justify-content: space-between; align-items: center">

            <div style="display: flex; align-items: center;margin-left: 20px">
              <img src="../../../assets/images/hidden.svg" style="width: 20px; height: 20px"/>
              <el-button type="text" style="margin-left: 7.5px" @click="hiddenAbstractFunc">隐藏摘要
              </el-button>
            </div>

            <el-checkbox @change="dataDuplicateRemoval" style="margin-left: 20px">数据排重</el-checkbox>

            <el-input placeholder="请输入内容" v-model="detailInput" style="margin-left: 20px;width: 400px">
              <el-select v-model="detailSelect" slot="prepend" placeholder="请选择" style="width: 130px">
                <el-option
                  v-for="dict in searchAreaOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
              <el-button slot="append" icon="el-icon-search" @click="search"/>
            </el-input>
          </div>


        </div>


        <div style="display: flex; justify-content: space-between">
          <div style="width: 100%">
            <el-table v-loading="loading" :data="topics" @selection-change="handleSelectionChange" stripe>
              <el-table-column type="selection" width="50" align="center"/>

              <el-table-column label="标题" align="center">
                <template slot-scope="scope">
                  <div>

                    <div style="display: flex">
                      <div>

                        <el-tag v-if="scope.row.level=='red'"
                                type="danger" size="mini"
                                effect="dark">
                          红色预警
                        </el-tag>
                        <el-tag v-if="scope.row.level=='orange'"
                                type="warning" size="mini"
                                effect="dark">
                          橙色预警
                        </el-tag>
                        <el-tag v-if="scope.row.level=='yellow'"
                                color="yellow" size="mini"
                                effect="light">
                          黄色预警
                        </el-tag>


                      </div>

                      <div
                        v-html="scope.row.title"
                        class="title_text"
                        @click="GotoDetail(scope.row.id)">
                      </div>

                      <div style="margin-left: 10px">
                        <el-tag size="small" v-if="scope.row.ispositive === 1" type="success"> 正面
                        </el-tag>
                        <el-tag size="small" v-else-if="scope.row.isnegative === 1"
                                type="danger"> 负面
                        </el-tag>
                        <el-tag size="small" v-else-if="scope.row.isneutral === 1"
                                type="warning"> 中性
                        </el-tag>
                        <el-tag size="small" v-else type="info"> 无
                        </el-tag>
                      </div>


                    </div>


                    <div v-if="hiddenAbstract" v-html="scope.row.content"
                         class="content_text">
                    </div>

                    <div style="float: left;display: flex; align-items: center; font-size: 12px;">
                      <div style="display: flex; align-items: center" @click="addToFavorites(scope.row)">
                        <img src="../../../assets/images/store.svg"
                             style="width: 16px; height: 16px"/>加入收藏
                      </div>
                      <el-divider direction="vertical"/>
                      <el-dropdown trigger="click" style="font-size: 12px">
                        <div style="display: flex; align-items: center; cursor: pointer">
                          <img src="../../../assets/images/research.svg"
                               style="width: 16px; height: 16px"/>研判为
                        </div>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item
                            @click.native="setSensitiveInformationBySigle(scope.row, '正面')">
                            正面
                          </el-dropdown-item>
                          <el-dropdown-item
                            @click.native="setSensitiveInformationBySigle(scope.row, '中性')">
                            中性
                          </el-dropdown-item>
                          <el-dropdown-item
                            @click.native="setSensitiveInformationBySigle(scope.row, '负面')">
                            负面
                          </el-dropdown-item>
                          <!--                              <el-dropdown-item-->
                          <!--                                @click.native="setSensitiveInformationBySigle(scope.row, '删除')">-->
                          <!--                                与我无关（删除）-->
                          <!--                              </el-dropdown-item>-->
                        </el-dropdown-menu>
                      </el-dropdown>
                      <el-divider direction="vertical"/>
                      <el-dropdown trigger="click" style="font-size: 12px">
                        <div style="display: flex; align-items: center">
                          <img src="../../../assets/images/warning.svg" style="width: 16px; height: 16px"/>加入预警
                        </div>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item
                            @click.native="setForecastSigle(scope.row, 'red')">
                            红色预警
                          </el-dropdown-item>
                          <el-dropdown-item
                            @click.native="setForecastSigle(scope.row, 'orange')">
                            橙色预警
                          </el-dropdown-item>
                          <el-dropdown-item
                            @click.native="setForecastSigle(scope.row, 'yellow')">
                            黄色预警
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>

                  </div>
                </template>
              </el-table-column>
              <el-table-column label="相似文章" width="100" align="center" prop="similarityNum">
                <template slot-scope="scope">
                  0
                </template>
              </el-table-column>
              <el-table-column label="来源" width="160" align="center" prop="siteName">
                <template slot-scope="scope">
                  <el-link style="margin-left:10px;font-size: 16px " type="primary" :href="scope.row.url"
                           target="_blank">
                    {{ scope.row.siteName }}
                  </el-link>
                </template>
              </el-table-column>
              <el-table-column label="时间" width="160" align="center" prop="publishTime"/>
            </el-table>
            <el-pagination style="text-align: center"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="pageParams.pageNum"
                           :page-sizes="[10, 20, 50, 100]"
                           :page-size="10"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="topicTotal">
            </el-pagination>
          </div>
        </div>
      </div>

    </div>


  </div>
</template>

<script>
  import {
    queryByTopicId,
    getSentimentByPublishTimeByTopicId, getKeywordsByTopicId,
    getMediaTypeByPublishTimeByTopicId,
    countSensitiveOpinionByMediaName,
    countSensitiveAuthorOpinion,
    getAllInformation,
    getInteractiveInformation,
    getInfluenceValue
  } from "@/api/system/topic";
  import {joinTheForecast, updateSensitiveInformation} from "@/api/system/event";
  import {exportOpinionByIds, addToFavorites} from "@/api/system/opinion";
  import LineChart from '@/components/Echarts/LineChart'
  import WordCloud from '@/components/Echarts/WordCloud'
  import BarChartDataSet from '@/components/Echarts/BarChartDataSet'
  import ModuleHeader from '@/views/components/ModuleHeader'
  export default {
    props: {
      topicId: {
        type: Number,
        default: 0
      },
      topicName: {
        type: String,
        default: null
      }
    },
    name: "Topic",
    components: {LineChart, WordCloud, BarChartDataSet,ModuleHeader},
    watch: {
      topicId() {
        this.getData();
      }
    },
    data() {
      return {
        selectSort: 'desc',
        sortOptions: [{"dictLabel": "时间降序", "dictValue": "desc"}, {"dictLabel": "时间升序", "dictValue": "asc"}],
        height: "400px",
        repeatState: false,
        setState: false,
        optionSeriesMediaType: [],
        optionXAxisDataMediaType: [],
        optionLegendMediaType: [],
        optionTitleTextMediaType: '',
        optionLegendSentiments: ["正面", "中性", "负面"],
        optionSeriesSentiments: [],
        optionXAxisDataSentiments: [],
        sentimentsColor: [
          "green",
          "gray",
          "red"
        ],
        optionTitleTextHotWords: "热词云图",
        hotWords: [{name: "暂无数据", value: 1}],

        opinionDatasetDimensionsMediaNameEmotion: [],
        opinionDatasetSourceMediaNameEmotion: [],
        optionTitleTextMediaNameEmotion: '',

        opinionDatasetDimensionsAuthorEmotion: [],
        opinionDatasetSourceAuthorEmotion: [],
        optionTitleTextAuthorEmotion: '',


        showIndex: 1,
        activeIndex: '1',
        // 遮罩层
        loading: true,
        // 导出遮罩层
        exportLoading: false,
        detailInput: '',
        detailSelect: 'all',
        searchAreaOptions: [],
        selectEmotion: '',
        topics: [],
        topicTotal: 0,
        queryParams: {
          //自定义选择的日期
          startDateTime: null,
          endDateTime: null,
        },
        params: {type: "comprehensive"},
        pageParams: {
          pageNum: 1,
          pageSize: 10,
        },
        checkList: [],
        hiddenAbstract: true,
        showSelectData: false,
        timeType: 'all',
        value1: '',
        ids: [],
        options: [
          {label: '全部', value: 'all'},
          {label: '今天', value: 'today'},
          {label: '昨天', value: 'yesterday'},
          {label: '近7天', value: 'week'},
          {label: '近30天', value: 'month'},
          {label: '自定义', value: 'define'},
        ],
        emotionOptions: [],
        isIndeterminate: true,
        checkAll: true,
        sum: 0,
        checks: [],
        carrieCounts: [],
        relatedInformation: 0,
        positive: 0,
        negative: 0,
        neutral: 0,

        totalComments: 0,
        totalShares: 0,
        totalReads: 0,
        totalLikes: 0,

        totalFans: 0,
        totalAuthors: 0,
      };
    },
    created() {
      this.getDicts("media_type").then(response => {
        this.checks = response.data;
      });
      this.getDicts("emotional_characteristics").then(response => {
        this.emotionOptions = response.data;
        let all = {
          dictValue: '',
          dictLabel: '全部'
        }
        this.emotionOptions.unshift(all);
      });

      this.getData();
      this.getDicts("search_area_options").then(response => {
        this.searchAreaOptions = response.data;
      });

    },
    methods: {
      getAllInformation() {
        getAllInformation({
          topicId: this.topicId,
        }).then(response => {
          this.relatedInformation = response.data.relatedInformation
          this.positive = response.data.positive
          this.negative = response.data.negative
          this.neutral = response.data.neutral

        })
      },
      getInteractiveInformation() {
        getInteractiveInformation({
          topicId: this.topicId,
        }).then(response => {
          this.totalComments = response.data.totalComments
          this.totalShares = response.data.totalShares
          this.totalReads = response.data.totalReads
          this.totalLikes = response.data.totalLikes

        })
      },
      getInfluenceValue() {
        getInfluenceValue({
          topicId: this.topicId,
        }).then(response => {
          this.totalFans = response.data.totalFans
          this.totalAuthors = response.data.totalAuthors

        })
      },

      getCount(carrie) {
        let count = 0
        this.carrieCounts.forEach(item => {
          if (item.name == carrie) {
            count = item.value
          }
        })
        return count
      },
      GotoDetail(id) {
        this.$router.push({path: '/opinion/detail', query: {id: id}});
      },
      countSensitiveOpinionByMediaName() {
        countSensitiveOpinionByMediaName({
          topicId: this.topicId,
        }).then(response => {
          this.opinionDatasetSourceMediaNameEmotion=[]
          let mediaNameSensitive = response.rows
          this.opinionDatasetDimensionsMediaNameEmotion = ["媒体名称", "正面", "负面", "中性"]
          mediaNameSensitive.forEach(m => {
            this.opinionDatasetSourceMediaNameEmotion.push([m.mediaName, m.positive, m.negative, m.neutral])
          })
          this.optionTitleTextMediaNameEmotion = '媒体活跃排行榜'

        });
      },
      countSensitiveAuthorOpinion() {
        countSensitiveAuthorOpinion({
          topicId: this.topicId,
        }).then(response => {
          this.opinionDatasetSourceAuthorEmotion=[]
          let authorRank = response.rows
          this.opinionDatasetDimensionsAuthorEmotion = ["媒体名称", "正面", "负面", "中性"]
          authorRank.forEach(m => {
            this.opinionDatasetSourceAuthorEmotion.push([m.author, m.positive, m.negative, m.neutral])
          })
          this.optionTitleTextAuthorEmotion = '意见领袖榜'

        });
      },
      getMediaTypeByPublishTimeByTopicId() {
        getMediaTypeByPublishTimeByTopicId({
          topicId: this.topicId,
        }).then(response => {
          //信息载体趋势图
          this.optionSeriesMediaType = []
          this.optionXAxisDataMediaType = []
          this.optionLegendMediaType = []
          let list = response.rows
          var xAxisData = [];
          var legendData = [];
          var seriesData = [];

// 获取legendData
          for (var i = 0; i < list.length; i++) {
            var row = list[i];
            // 添加日期到xAxisData数组
            xAxisData.push(row.name);
            // 获取legendData
            for (var j = 0; j < row.value.length; j++) {
              var value = row.value[j];
              // 添加value.name到legendData数组
              if (!legendData.includes(value.name)) {
                legendData.push(value.name);
              }
            }
          }

          // 遍历list数组
          for (var i = 0; i < list.length; i++) {
            var row = list[i];
            for (let k = 0; k < legendData.length; k++) {
              //获取媒体类型
              let mediaName=legendData[k];

              // 查找对应的series对象
              var getMediaName = row.value.find(function (obj) {
                return obj.name === mediaName;
              });

              if (!getMediaName) {
                let obj={
                  name:mediaName,
                  value:0
                }
                row.value.push(obj)
              }
            }

            // 遍历row.value数组
            for (let j = 0; j < row.value.length; j++) {
              let value = row.value[j];

              // 查找对应的series对象
              let seriesObj = seriesData.find(function (obj) {
                return obj.name === value.name;
              });

              // 如果找不到对应的series对象，则创建一个新的series对象
              if (!seriesObj) {
                seriesObj = {
                  name: value.name,
                  type: 'line',
                  data: []
                };
                seriesData.push(seriesObj);
              }
              // 添加value.value到seriesObj的data数组中
              seriesObj.data.push(value.value);
            }


          }

// 创建series数组
          var series = [];
          for (var i = 0; i < seriesData.length; i++) {
            var data = seriesData[i];

            // 创建series对象
            var seriesObj = {
              name: data.name,
              type: 'line',
              // stack: 'Total',
              data: data.data
            };

            // 将seriesObj添加到series数组中
            series.push(seriesObj);
          }

          console.log("媒体：",xAxisData);
          console.log("媒体：",legendData);
          console.log("媒体：",series);

          this.optionSeriesMediaType = series
          this.optionXAxisDataMediaType = xAxisData
          this.optionLegendMediaType = legendData

        });
      },
      getKeywordsByTopicId() {
        let param = {
          topicId: this.topicId,
        };
        getKeywordsByTopicId(param).then(response => {
          if (response.rows != undefined && response.rows.length > 0) {
            this.hotWords = response.rows;
          } else {
            this.hotWords = [{name: "暂无数据", value: 1}];
          }
          console.log(this.hotWords)
        });
      },
      getSentimentByPublishTimeByTopicId() {
        getSentimentByPublishTimeByTopicId({
          topicId: this.topicId,
        }).then(response => {
          this.optionSeriesSentiments = []
          this.optionXAxisDataSentiments = []
          let list = response.rows
          let zm = {
            name: '正面',
            type: 'line',
            data: [],
            lineStyle: {
              "color": "green",
              // "width": 4,
              // "type": "dashed"
            },
          }
          let zx = {
            name: '中性',
            type: 'line',
            data: [],
            lineStyle: {
              "color": "gray",
            },
          }
          let fm = {
            name: '负面',
            type: 'line',
            data: [],
            lineStyle: {
              "color": "red",
            },
          }
          let zmlist = []
          let zxlist = []
          let fmlist = []
          list.forEach(item => {
            this.optionXAxisDataSentiments.push(item.name);
            let zmnum = 0
            let zxnum = 0
            let fmnum = 0
            item.value.forEach(i => {
              if (i.name == 'ispositive') {
                zmnum = i.value
              }
              if (i.name == 'isneutral') {
                zxnum = i.value
              }
              if (i.name == 'isnegative') {
                fmnum = i.value
              }
            })
            zmlist.push(zmnum)
            zxlist.push(zxnum)
            fmlist.push(fmnum)
          })
          zm.data = zmlist
          zx.data = zxlist
          fm.data = fmlist
          this.optionSeriesSentiments.push(zm)
          this.optionSeriesSentiments.push(zx)
          this.optionSeriesSentiments.push(fm)

        });
      },


      dataDuplicateRemoval(value) {
        this.repeatState = value;
        this.queryByTopicId();
      },

      handleSelectTab(key, keyPath) {
        console.log(key, keyPath);
        this.showIndex = key;
      },


      yanpan: function (query) {

        updateSensitiveInformation(query).then(response => {
          this.$message({
            showClose: true,
            message: '研判成功',
            type: 'success'
          })
          this.queryByTopicId()
        }).catch(error => {
          this.$message({
            showClose: true,
            message: '研判失败',
            type: 'warning'
          })
        })
      },

      setSensitiveInformationByPelople(sensitiveInformation) {
        if (this.ids.length === 0) {
          this.$message({
            showClose: true,
            message: '请选择文章',
            type: 'warning'
          })
          return
        }
        if (sensitiveInformation === "删除") {
          const query = {
            ids: this.ids,
            type: "exclude",
            eventId: this.eventId
          }
          this.unbind(query)
        } else {
          const query = {
            ids: this.ids,
            sensitive: sensitiveInformation
          }
          this.yanpan(query)
        }
      },
      handleCheckedMediaTypeChange(value) {
        console.log("value", value)
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.checks.length * 2;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.checks.length;
        //重新请求
        this.queryByTopicId()
      },
      handleCheckAllChange(val) {
        if (val) {
          this.checkList = []
          this.checks.forEach(item => {
            this.checkList.push(item.dictValue)
          })
        } else {
          this.checkList = []
        }
        this.isIndeterminate = false;
        if (!val) {
          this.$notify({
            title: '警告',
            message: '情选择舆情载体',
            type: 'warning'
          });
        }
        //重新请求
        this.queryByTopicId()
      },

      buildParam() {
        this.queryParams.topicId = this.topicId
        this.queryParams.mediaType = []
        if (this.selectEmotion === 'positive') {
          this.queryParams.ispositive = 1
          this.queryParams.isneutral = null
          this.queryParams.isnegative = null
        } else if (this.selectEmotion === 'neutral') {
          this.queryParams.ispositive = null
          this.queryParams.isneutral = 1
          this.queryParams.isnegative = null
        } else if (this.selectEmotion === 'negative') {
          this.queryParams.ispositive = null
          this.queryParams.isneutral = null
          this.queryParams.isnegative = 1
        } else {
          this.queryParams.ispositive = null
          this.queryParams.isneutral = null
          this.queryParams.isnegative = null
        }
        this.queryParams.timeType = this.timeType
        this.queryParams.repeatState = this.repeatState
        //选中媒体类型
        if (this.checkList.length > 0) {
          this.checkList.forEach(item => {
            this.queryParams.mediaType.push(item);
          })
        }
        //关键字
        if (this.detailInput != '') {
          this.queryParams.searchArea = this.detailSelect;
        }
        //排序
        this.queryParams.sort = this.selectSort;
        this.queryParams.keyWords = this.detailInput;
      },
      queryByTopicId() {
        this.buildParam();
        queryByTopicId(this.queryParams, this.pageParams).then(response => {
          this.loading = false;
          this.topics = response.rows
          this.topicTotal = response.total
          this.carrieCounts = response.custom

        })
      },

      setForecastMultiple(level) {
        if (this.ids.length === 0) {
          this.$message({
            showClose: true,
            message: '请选择文章',
            type: 'warning'
          })
          return
        }
        const query = {
          ids: this.ids,
          level: level
        }
        joinTheForecast(query).then(response => {
          this.$message({
            showClose: true,
            message: '预警成功',
            type: 'success'
          })
          this.queryByTopicId()
        }).catch(error => {
          this.$message({
            showClose: true,
            message: '预警失败',
            type: 'warning'
          })
        })
      },
      addToFavorites(row) {
        const queryParams = {
          ids: row.id,
        };
        addToFavorites(queryParams).then(response => {
          this.$message({
            showClose: true,
            message: '加入收藏成功',
            type: 'success'
          })
        })
      },
      addToFavoritesMultiple() {
        if (this.ids.length === 0) {
          this.$message({
            showClose: true,
            message: '请选择文章',
            type: 'warning'
          })
          return
        }
        const queryParams = {
          ids: this.ids,
        };
        addToFavorites(queryParams).then(response => {
          this.$message({
            showClose: true,
            message: '加入收藏成功',
            type: 'success'
          })
        })

      },
      handleExport() {
        if (this.ids.length === 0) {
          this.$message({
            showClose: true,
            message: '请选择文章',
            type: 'warning'
          })
          return
        }

        const queryParams = {
          ids: this.ids,
        };

        this.$confirm('是否确认导出所选舆情数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.exportLoading = true;
          return exportOpinionByIds(queryParams);
        }).then(response => {
          this.download(response.msg);
          this.exportLoading = false;
        })
      },
      onChangeGroupEmotion() {
        this.queryByTopicId();
      },
      onChangeGroupSort() {
        this.queryByTopicId();
      },
      onPickDate(value) {
        console.log(value[0], value[1])
        this.queryParams.startDateTime = value[0]
        this.queryParams.endDateTime = value[1]
        this.queryByTopicId()

      },
      handleSelectionChange(val) {
        this.ids = []
        for (let i = 0; i < val.length; i++) {
          this.ids.push(val[i].id)
        }
      },
      onChangeGroup() {
        this.showSelectData = this.timeType == "define" ? true : false
        if (this.timeType !== "define") {
          this.queryByTopicId();
        }
      },
      search() {
        //重新请求
        this.queryByTopicId()
      },
      /** 查询模版组件列表 */
      getData() {
        this.queryByTopicId();
        this.getSentimentByPublishTimeByTopicId()
        this.getMediaTypeByPublishTimeByTopicId()
        this.getKeywordsByTopicId()
        this.countSensitiveOpinionByMediaName()
        this.countSensitiveAuthorOpinion()
        this.getAllInformation()
        this.getInteractiveInformation()
        this.getInfluenceValue()
      },
      handleSizeChange(pageSize) {
        this.pageParams.pageSize = pageSize
      },
      handleCurrentChange(currentPage) {
        this.pageParams.pageNum = currentPage
        this.queryByTopicId();
      },
      setForecastSigle(row, level) {
        const query = {
          ids: row.id,
          level: level
        }
        joinTheForecast(query).then(response => {
          this.$message({
            showClose: true,
            message: '预警成功',
            type: 'success'
          })
          this.queryByTopicId()
        }).catch(error => {
          this.$message({
            showClose: true,
            message: '预警失败',
            type: 'warning'
          })
        })
      },
      setSensitiveInformationBySigle(row, sensitiveInformation) {
        console.log(row.id)

        if (sensitiveInformation == "删除") {
          const query = {
            ids: row.id,
            type: "exclude",
            eventId: this.eventId
          }
          this.unbind(query)
        } else {
          let query = {
            ids: row.id,
            sensitive: sensitiveInformation
          }
          this.yanpan(query)
        }

      },

      hiddenAbstractFunc() {
        this.hiddenAbstract = this.hiddenAbstract === true ? false : true
      },
    }
  };
</script>

<style scoped lang="scss">
  .home {
    background-color: #eeeeee;
  }

  .search-shape {

    padding: 10px;
    background-color: #fff;
  }

  .event-shape {
    margin-top: 10px;
    min-height: 500px;
    background-color: #fff;
  }

  .handle-nav {
    padding: 10px;
    right: 50px;
    top: 0px;
    display: flex;
    justify-content: space-between;
  }

  .title_text {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #000;
    font-size: 16px;
  }

  .content_text {
    text-align: left;
    margin-bottom: 12px;
    color: #666;
    font-size: 14px;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .card-item {
    margin: 10px 0;
    position: relative;
    height: 170px;
    border-radius: 4px;
  }

  .total-nums {
    margin: 0 15px;
    padding-bottom: 10px;
    color: #fff;
    font-weight: 600;
    font-size: 32px;
    text-align: center;
    border-bottom: 1px dashed #fff;
  }

  .cate-con {
    display: flex;
    justify-content: center;
    padding-top: 15px;
  }

  .ph10 {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  .inline-block {
    display: inline-block !important;
  }

  .color-fff {
    color: #fff;
  }

  .v-a-m {
    vertical-align: middle !important;
  }

  .text-center {
    text-align: center !important;
  }

  .header-item {
    margin: 10px 15px 0;
    margin-right: 15px;
    color: #fff;
  }

  .mr15 {
    margin-right: 15px !important;
  }

  .mt15 {
    margin-top: 15px !important;
  }

  .cur-p {
    cursor: pointer;
  }

  .pull-right {
    float: right;
  }

  .header-title {
    padding-left: 10px;
    font-weight: 400;
    vertical-align: bottom;
  }

  .font-size-16 {
    font-size: 16px !important;
  }

  .el-menu--horizontal > .el-menu-item {
    float: right;
  }

  .topic_name_label {
    height: 60px;
    line-height: 60px;
    font-weight: 600;
    color: #1a1a1a;
    width: 300px
  }

  .topic_name_label::before {
    width: 4px;
    height: 15px;
    transform: translateY(-50%);
    content: "|";
    background-color: #3fc3e3;
  }

  ::v-deep .el-collapse-item__header {
    font-weight: 700;
  }

  .box {
    background-color: white;
    margin-bottom: 10px;
  }

  .box_div {
    height: 380px;
    padding: 20px;
    font-size: 14px;
    display: flex;
    flex-direction: column;
  }


</style>
